<template>
    <!-- 工作台组件 -->
    <entity-manager
        :fields="fields"
        :queryFields="queryFields"
        apiPrefix="/sys/workbench-cmp"
        :tree="false"
        ref="entityManagerRef"
        :params="params"
        operationsWidth="230px"
        :withDelete="false"
        :withEdit="false"
    >
        <template #appendButtons="{ row }">
            <el-link type="primary" icon="memo" @click="goDetail(row)">详情</el-link>
            <el-link type="warning" icon="close" @click="offline(row)">下线</el-link>
        </template>
    </entity-manager>

    <full-panel v-model="visible" :key="current.id" title="详情">
        <detail :cmp="current" @change="reload" @close="visible = false" />
    </full-panel>
</template>

<script setup>
import FullPanel from "@/components/full-panel.vue";
import detail from "./detail.vue";
import _ from "lodash";
import { ref } from "vue";

const fields = [
    { label: "组件名称", prop: "name", max: 255, required: true, unique: true, width: "200px" },
    { label: "组件描述", prop: "remark", max: 255, type: "textarea", rows: 5 },
    {
        label: "组件状态",
        prop: "status",
        max: 16,
        converter: (val) => (val == "draft" ? "草稿" : val == "editing" ? "编辑中" : val == "published" ? "已发布" : "已下线"),
        needNew: false,
        width: "80px",
    },
    { label: "组件排序", prop: "sort", default: 9, type: "number", width: "80px" },
    { label: "添加时间", prop: "createTime", width: "160px", system: true },
    { label: "修改时间", prop: "updateTime", width: "160px", system: true },
];
const queryFields = [];
const entityManagerRef = ref();
const params = ref({});
const visible = ref(false);
const current = ref({});

function reload() {
    entityManagerRef.value.reload();
}

function goDetail(row) {
    current.value = _.clone(row);
    visible.value = true;
}

function offline(row) {
    app.confirm("确定下线当前组件？").then(() => {
        app.https
            .put("/sys/workbench-cmp/update", {
                id: row.id,
                status: "offline",
            })
            .then(() => {
                app.success();
                row.status = "offline";
            });
    });
}
</script>
